<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm
        :init-query="initQuery"
        v-model:value="queryForm"
        @submit="resetPageReload"
      >
        <template #default="{ queryForm }">
          <QueryItem
            :query-form="queryForm"
            :options-map="optionsMap"
            :table-columns="queryItems.default"
          ></QueryItem>
        </template>
      </QueryForm>
    </div>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent"
      :scroll-x="1280"
    >
      <template #tableTitle>
        <n-space>
          
          <n-button
            v-authd="AuthCodes['用户管理新建']"
            type="primary"
            :disabled="!vCtl.addBtn"
            @click="doSaveModal()"
          >
            新建
          </n-button>
          <!-- <n-button
            v-authd="AuthCodes['用户管理编辑']"
            type="warning"
            :disabled="!vCtl.updateBtn"
            @click="doUpdateModal()"
          >
            编辑
          </n-button> -->
          <n-button
            v-authd="AuthCodes['用户管理删除']"
            type="error"
            :disabled="!vCtl.delBtn"
            @click="doDeleteModal()"
          >
            删除
          </n-button>
          <n-button type="primary" :disabled="!vCtl.addBtn" @click="exportLog()"> 导出</n-button>
          <n-button
            v-authd="AuthCodes['用户管理删除']"
            type="primary"
            :disabled="!vCtl.delBtn"
            @click="doBindDataSecurityModal()"
          >
            批量数据授权
          </n-button>
          <n-button
            v-authd="AuthCodes['用户管理删除']"
            type="primary"
            :disabled="!vCtl.delBtn"
            @click="doBatchConfigUserInfo()"
          >
            批量配置信息
          </n-button>
        </n-space>
      </template>
      <template #toolbar> </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watch, computed } from 'vue';
  import { BasicTable, QueryForm, QueryItem,useOpenDownload } from 'slash-admin';
  import httpApi from './httpApi';
  import {
    checkedRows,
    doDeleteModal,
    doSaveModal,
    doUpdateModal,
    enabledOptions,
    getRoleOptions,
    initQuery,
    onCheckedRowEvent,
    queryForm,
    reloadTable,
    tableColumns,
    isLockOptions,
    tableRef,
    vCtl,
    doBindDataSecurityModal,
    doBatchConfigUserInfo
  } from './Service';
  import { AuthCodes } from '@/apis/auth-code';
  import { getOptionsMap } from './options';

  export default defineComponent({
    components: { BasicTable, QueryForm, QueryItem },
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {};
        },
      },
    },
    setup(props, ctx) {
      const roleOptions = ref<any>();
      const optionsMap = getOptionsMap();
      async function exportLog() {
        useOpenDownload('/AuthApp/authTbUser/export',oldQuery);
      }
      let oldQuery = {
        ...queryForm.value,
      };
      const queryItems = computed(() => {
        const result: { default: MyTableBasicColumn[]; more: MyTableBasicColumn[] } = {
          default: [],
          more: [],
        };
        tableColumns.forEach((item) => {
          if (item.searchProps) {
            if (item.searchProps.more) {
              result.more.push(item);
            } else {
              result.default.push(item);
            }
          }
        });

        return result;
      });
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      const loadDataTable = async (res) => {
        console.log('更新', checkedRows.value);
        const params = {
          searchKey: null,
          ...res,
          ...queryForm.value,
        };
        oldQuery = params;
        return await httpApi.selectPageList(params);
      };

      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log('更新完成');
      });

      onMounted(async () => {
        // roleOptions.value = await getRoleOptions();
        console.log('queryItems', queryItems.value);
      });
      return {
        roleOptions,
        loadDataTable,
        reloadTable,
        isLockOptions,
        tableColumns,
        vCtl,
        onCheckedRowEvent,
        enabledOptions,
        queryForm,
        tableRef,
        initQuery,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        AuthCodes,
        resetPageReload: () => {
          tableRef.value.resetPageReload();
        },
        queryItems,
        optionsMap,
        doBindDataSecurityModal,
        doBatchConfigUserInfo,
        exportLog
      };
    },
  });
</script>

<style lang="less" scoped>
</style>
